<template>
	<view>
		<cu-custom title="我的订单" ></cu-custom>
		<view class="margin-lr  radius-lg  padding-bottom" style="margin-top: 10rpx">
			<u-tabs :list="curriculumTypeList" lineWidth="20" lineHeight="7"
				:lineColor="`url(/static/images/ico/active-bg.png) 100% 100%`" :activeStyle="{
			        color: '#ea3457',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#333',
			        transform: 'scale(1)'
			    }" itemStyle="padding-right: 30rpx; height: 100rpx;">
			</u-tabs>
			<view class="margin-top-lg  "
				v-for="(item,index) in 1" :key="index">
				<view class=" align-center bg-white p-15 b-r-15 m-b-15">
					<view class="title-order" style="clear: both;"><text>钢琴大师在线教导训练营</text><text class="tip-red">兴趣</text></view>
					<view class="c-l p-t-b-15">
					<view class="d-s-f f-l ">
						<u-avatar size="70rpx" src="https://cdn.uviewui.com/uview/album/1.jpg" class="avatar"></u-avatar>
						<text class="f-s-16" style="line-height: 70rpx; padding-left: 15rpx;">王勇</text>
					</view>
					<view class="f-r t-a-r d-s-f">
						<button class="button-fill bt-red">待确认</button>
					</view>
					
					</view>
					<view class="c-l color-v">6月份8小时课时，剩余32小时（VIP课程）</view>
					<view class="top-r-images"><image mode="aspectFit" src="../../../static/images/user/my-learning.png"></image></view>
				</view>
		<view class=" align-center bg-white p-15 b-r-15 m-b-15">
			<view class="title-order" style="clear: both;"><text>钢琴大师在线教导训练营</text><text class="tip-red">兴趣</text></view>
			<view class="c-l p-t-b-15">
			<view class="d-s-f f-l">
				<u-avatar size="70rpx" src="https://cdn.uviewui.com/uview/album/1.jpg" class="avatar"></u-avatar>
				<text class="f-s-16" style="line-height: 70rpx; padding-left: 15rpx;">王勇</text>
			</view>
			<view class="f-r t-a-r d-s-f">
				<button class="button-fill bt-grey">已确认</button><button class="button-fill bt-red"  @tap="$routerGo('/pages/user/index')">待评价</button>
			</view>
			
			</view>
			<view class="c-l color-v">6月份8小时课时，剩余32小时（VIP课程）</view>
			<view class="top-r-images"><image mode="aspectFit" src="../../../static/images/user/my-finish.png"></image></view>
		</view>
		<view class=" align-center bg-white p-15 b-r-15 m-b-15">
			<view class="title-order" style="clear: both;"><text>钢琴大师在线教导训练营</text><text class="tip-red">兴趣</text></view>
			<view class="c-l p-t-b-15">
			<view class="d-s-f f-l">
				<u-avatar size="70rpx" src="https://cdn.uviewui.com/uview/album/1.jpg" class="avatar"></u-avatar>
				<text class="f-s-16" style="line-height: 70rpx; padding-left: 15rpx;">王勇</text>
			</view>
			<view class="f-r t-a-r d-s-f">
				<button class="button-fill bt-grey">已确认</button><button class="button-fill bt-red">待评价</button>
			</view>
			
			</view>
			<view class="c-l color-v">6月份8小时课时，剩余32小时（VIP课程）</view>
			<view class="top-r-images"><image mode="aspectFit" src="../../../static/images/user/my-pending.png"></image></view>
		</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//课程分类列表
				curriculumIndex: 0,
				curriculumTypeList: [{
					name: '全部订单'
				}, {
					name: '在学',
				}, {
					name: '已学',
				}, {
					name: '已结'
				}, {
					name: '待退'
				}, {
					name: '已退'
				}, {
					name: '待评价'
				}],
			}
		},
		methods: {
			curriculumTypeTab(item) {
				this.curriculumIndex = item.index
			},
		}
	}
</script>

<style lang="less" scoped>
@import '@/static/css/common.css';
.avatar{ height: 60rpx; width:60rpx;}
.button-fill{ border-radius: 40rpx; height: 60rpx; line-height: 60rpx; width: 150rpx; font-size: 16px; margin-left: 10px;}
.bt-grey{border: 1px solid #999; color: #666; background: #fff;}
.bt-red{border: 1px solid #ea3457; color: #ea3457;  background: #fff;}
.title-order{ font-size: 16px; font-weight: bold; margin-bottom: 15rpx;}
.p-t-b-15{  display: flow-root;}
.color-v{ color: #666;}
.align-center{  position: relative;}
.top-r-images{ position: absolute; top: -96px; right: 0; width: 48px; height: 48px; z-index: 999;}
.tip-red{ background:#ea3457 ; color: #fff; padding: 3px 7px; font-size: 14px; font-weight: normal; border-radius: 0 10px 0 10px; margin-left: 10px;}
</style>
